<template>
    <view style="margin: 30rpx;">
        <view style="margin-top: 20rpx">
            <uni-easyinput placeholder="输入名称进行搜索" :placeholderStyle="'font-size:28rpx'" @input="inputSearch">
                <template slot="left">
                    <view style="margin-left: 14rpx; margin-top: 6rpx">
                        <image :src="require('../static/sousuo.png')" style="width: 34rpx; height: 34rpx"></image>
                    </view>
                </template>
            </uni-easyinput>
        </view>
        <view class="productMatchContent">
            <view class="row">
                <view class="history">个人匹配历史</view>
                <view class="historyRight row" style="align-items: center">
                    <image :src="require('../static/gantanha.png')" style="width: 26rpx; height: 26rpx"></image>
                    <text style="margin-left: 8rpx">只保留最近90天的记录</text>
                </view>
            </view>
            <view class="row" style="justify-content: flex-start; margin-top: 20rpx">
                <view @click="filterClick({ value: '' }, 0)" class="tagStyle" :class="current == 0 ? 'active' : ''"
                    style="padding: 6rpx 26rpx; text-align: center">全部
                </view>
                <view class="filterScroll" style="width: 80%; overflow-x: scroll">
                    <view style="width: 800rpx;">
                        <view style="padding: 6rpx 26rpx" @click="filterClick(item)"
                            :class="current == item.index ? 'active' : ''" class="tagStyle"
                            v-for="(item, index) in matchType" :key="index">{{ item.name }}
                        </view>
                    </view>
                </view>
            </view>
            <!-- <view class="row" style="justify-content: flex-start; margin-top: 20rpx">
                <view @click="typeFilterClick(item, index)" class="tagStyle"
                    :style="{ padding: index == 0 ? '6rpx 26rpx' : '' }" v-for="(item, index) in matchRole" :key="index"
                    :class="typeTagCurrent == index ? 'active' : ''">{{ item.name }}
                </view>
            </view> -->

            <view style="margin-top: 30rpx" v-if="reportList.length > 0">
                <view class="listItem paddingL15" v-for="(item, index) in reportList" :key="index"
                    @click="canDoProductClick(item)">
                    <view style="display: flex; align-items: center">
                        <view class="name">{{ item.enterpriseName || item.creditCode }}</view>
                        <view class="cardType">{{ cardType[item.type] }}</view>
                    </view>

                    <view class="row" style="margin-top: 26rpx; align-items: end" :style="{
                        'justify-content': item.resultType == 1 ? 'flex-start' : '',
                    }">
                        <view v-if="item.matchStatus == 2 || item.matchStatus == 3" class="row card-result">
                            <image :src="require('../static/shijian.png')" style="width: 25rpx; height: 25rpx">
                            </image>
                            <view style="margin-left: 10rpx; align-items: center">
                                {{ item.createTime && item.createTime.substring(0, 16) }}
                            </view>
                            <view class="marginL10" style="color: #666; font-weight: bold" v-if="item.matchStatus != 3">
                                {{
                                    matchStepArr[item.matchStep] }}
                            </view>
                            <view v-if="item.matchStatus == 3" class="errStyle">税务匹配失败
                            </view>
                            <view style="margin-left: 8rpx; padding-top: 8rpx" v-if="item.matchStatus == 3">
                                <image :src="require('../static/gantanhaoR.png')" style="width: 26rpx; height: 26rpx">
                                </image>
                            </view>
                        </view>

                        <view v-if="item.matchStatus == 1"
                            style="display: flex; align-items: center;white-space: nowrap">
                            <view class="isMatching">正在匹配中</view>
                            <view style="color: #222222; margin-left: 14rpx">正在匹配中，请耐心等待... </view>
                            <view style="color: #666; font-weight: bold" class="marginL10">
                                {{ matchStepArr[item.matchStep] }}
                            </view>
                        </view>

                        <view class="canDoProd" v-if="item.matchStatus == 2">
                            <view style="font-weight: 600">
                                {{ item.matchStatus == 1 ? "" : ` 可做产品` }}
                                <text style="color: #2872fd; font-weight: bold; font-size: 28rpx" class="marginL5">{{
                                    item.productNum > 20 ? 20 : item.productNum }}
                                </text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-else style="margin-top: 130rpx">
                <empty emptyTitle="暂无数据"></empty>
            </view>

        </view>
    </view>
</template>

<script>
import { getMatchEnterpriseListApi } from '@/api/product'
import { mapGetters } from "vuex";
import empty from '../../components/empty/empty.vue';
export default {
    components: { empty },
    computed: mapGetters(["isLogin"]),
    data() {
        return {
            current: 0,
            typeTagCurrent: 0,
            matchStepArr: ["答题匹配", "税务匹配"],
            cardType: ["", "企业", "个体工商户"],
            matchType: [
                { name: "税务匹配", value: "1", index: 1 },
                { name: "答题匹配", value: "0", index: 2 },
                // { name: "征信匹配", value: "2", index: 3 },
                // { name: "专家匹配", value: "3", index: 4 },
            ],
            matchRole: [
                { name: "全部", value: "0" },
                { name: "企业", value: "1" },
                { name: "个体工商户", value: "2" },
            ],
            filterParams: {
                pageSize: 10,
                pageNum: 1,
                enterpriseName: "",
                // matchStatus: 0,
                // matchType: "",
                matchStep: "",
            },
            total: 0,
            reportList: [],
            searchLoading: false
        }
    },
    onLoad(options) {
        if (this.isLogin) {
            this.getList();
        }
    },
    async onPullDownRefresh() {

        uni.pageScrollTo({
            scrollTop: 0,
            duration: 0,
        });
        this.resetPageInfo()
        uni.stopPullDownRefresh();
    },
    onReachBottom() {
        if (this.total > this.filterParams.pageSize * this.filterParams.pageNum) {
            this.filterParams.pageNum++;
            this.getList();
        } else {
            this.$util.Tips("没有更多数据了");
        }
    },
    methods: {
        resetPageInfo() {
            this.reportList = [];
            this.filterParams= {
                pageSize: 10,
                pageNum: 1,
                enterpriseName: "",
                // matchStatus: 0,
                // matchType: "",
                matchStep: "",
            },
            this.getList()
        },
        inputSearch(val) {
            clearInterval(this.timer);
            this.timer = setTimeout(() => {
                this.filterParams.enterpriseName = val;
                this.reportList = [];
                this.filterParams.pageNum = 1;
                this.getList()
            }, 500);
        },
        canDoProductClick(item) {
            // console.log(item, "this is item data");
            // matchStep 2 征信匹配  3 客服匹配 1 税务  0 答题
            const stepMap = {
                0: 3,
                1: 3,
                2: 4,
                3: 5
            }
            if (item.matchStatus == 2) {
                uni.navigateTo({
                    url: `/pagesProduct/matchResult/index?id=${encodeURIComponent(item.id)}&type=${item.type}&current=${item.type == 2 ? 1 : stepMap[item.matchStep]}&createTime=${item.createTime}`,
                });
            }
        },
        filterClick(item, index) {
            if (this.current == index || this.current == item.index) return;
            if (index == 0) {
                this.current = 0;
            } else {
                this.current = item.index;
            }
            if (this.isLogin) {
                this.filterParams.matchStep = item.value;
                this.filterParams.pageNum = 1;
                this.filterParams.pageSize = 10;
                this.reportList = [];
                this.getList()
            }
        },

        typeFilterClick(item, index) {
            if (item.name == "个人") return;
            if (this.typeTagCurrent == index) return;
            this.typeTagCurrent = index;
            if (this.isLogin) {
                this.filterParams.matchType = item.value == 0 ? '' : item.value;
                this.filterParams.pageNum = 1;
                this.filterParams.pageSize = 10;
                this.reportList = [];
                this.getList()
            }
        },

        getList() {
            this.searchLoading = true;
            getMatchEnterpriseListApi(this.filterParams).then(res => {
                this.reportList = [...this.reportList, ...res.data.list];
                this.total = res.data.total;
            }).finally(() => {
                this.searchLoading = false;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.errStyle {
    color: #e60000;
    font-size: 26rpx;
    font-weight: 600;
    margin-left: 10rpx;
}

.card-result {
    justify-content: flex-start;
    font-size: 26rpx;
    color: #999999;
    align-items: center;
}

.productMatchContent {
    margin-top: 40rpx;

    .history {
        font-weight: 600;
        font-size: 34rpx;
    }

    .historyRight {
        font-size: 22rpx;
        color: #999999;
    }

    .tagStyle {
        //border: 2rpx solid #222222;
        padding: 6rpx 26rpx;
        height: 58rpx;
        line-height: 58rpx;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
        margin-right: 20rpx;
        background: #fff;
        color: #666666;
    }

    .active {
        background: #eef5ff;
        color: #2872fd;
        border: 2rpx solid #8db4fe;
        font-weight: 600;
    }

    .listItem {
        //background: #cccccc;
        position: relative;
        border-radius: 20rpx;
        padding-top: 30rpx;
        padding-bottom: 40rpx;
        margin-bottom: 30rpx;
        background-color: #fff;
        box-shadow: 0rpx 0rpx 6rpx 4rpx rgba(246, 251, 255, 1);

        .isMatching {
            // width: 200rpx;
            padding: 4rpx 14rpx;
            color: #ffffff;
            background: #2872fd;
            // border-radius: 10rpx;
        }

        .cardType {
            background: #fa7700;
            padding: 0rpx 14rpx;
            height: 36rpx;
            line-height: 36rpx;
            border-radius: 6rpx;
            color: #ffffff;
            font-size: 26rpx;
            margin-left: 10rpx;
            display: flex;
            font-weight: bold;
            align-items: center;
            white-space: nowrap;
        }

        .name {
            font-size: 36rpx;
            color: #333333;
            font-weight: 600;
            white-space: nowrap;
            max-width: 81%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .canDoProd {
            padding: 6rpx 20rpx;
            background: #eef5ff;
            color: #2872fd;
            //font-weight: 500;
            border-radius: 10rpx;
            border: 2rpx solid #2872fd;
            font-size: 26rpx;
        }
    }
}

/deep/ .uni-easyinput__content {
    background-color: #fff !important;
    border: none !important;
}

.filterScroll {
    &::-webkit-scrollbar {
        display: none;
    }
}
</style>